import { EChartsOption } from "echarts";
import * as echarts from "echarts";
const Windowfontsize = innerWidth / 1920;
// AI告警分类统计
export const AITypeStatistics = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    show: true,
    itemWidth: 6,
    itemHeight: 6,
    backgroundColor: "transparent",
    data: [
      {
        name: "已处理告警数量",
        textStyle: {
          color: "white",
          fontSize: 12 * Windowfontsize,
        },
        itemStyle: {
          color: "rgba(60, 229, 189, 1)",
        },
        icon: "rect",
      },
      {
        name: "未处理告警数量",
        textStyle: {
          color: "white",
          fontSize: 12 * Windowfontsize,
        },
        itemStyle: {
          color: "rgba(242, 63, 63, 1)",
        },
        icon: "rect",
      },
    ],
    orient: "horizontal", //水平显示
    left: "0px",
    top: "12%",
  },
  grid: {
    left: "0px",
    right: "0px",
    bottom: "0px",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#B8BAB8",
        },
      },
      axisLabel: {
        color: "white",
      },
      fontSize: 12 * Windowfontsize,
      data: ["一般", "告警", "紧急"],
    },
  ],
  yAxis: [
    {
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLine: {
        show: true,
      },
      type: "value",
      axisLabel: {
        color: "white",
      },
    },
  ],
  series: [
    {
      name: "已处理告警数量",
      type: "bar",
      stack: "total",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(60, 229, 189, 1)" },
          { offset: 1, color: "rgba(60, 229, 189, 0.10)" },
        ]),
      },
      label: {
        show: true,
        position: "inside",
        formatter: "{c}",
        color: "#FFFFFF",
      },
      //设置柱状图大小
      barWidth: 30,
      data: [],
    },
    {
      name: "未处理告警数量",
      type: "bar",
      stack: "total",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(242, 63, 63, 1)" },
          { offset: 1, color: "rgba(242, 63, 63, 0.10)" },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      label: {
        show: true,
        position: "inside",
        formatter: "{c}",
        color: "#FFFFFF",
      },
      //设置柱状图大小
      barWidth: 30,
      data: [],
    },
  ],
};
// 区域AI告警处理统计
export const ZoneAlerts: EChartsOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    show: true,
    itemWidth: 6,
    itemHeight: 6,
    backgroundColor: "transparent",
    data: [
      {
        name: "已处理告警数量",
        textStyle: {
          color: "white",
          fontSize: 12 * Windowfontsize,
        },
        itemStyle: {
          color: "rgba(60, 229, 189, 1)",
        },
        icon: "rect",
      },
      {
        name: "未处理告警数量",
        textStyle: {
          color: "white",
          fontSize: 12 * Windowfontsize,
        },
        itemStyle: {
          color: "rgba(242, 63, 63, 1)",
        },
        icon: "rect",
      },
    ],
    orient: "horizontal", //水平显示
    left: "0px",
    top: "12%",
  },
  grid: {
    left: "0px",
    right: "5%",
    bottom: "0px",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#B8BAB8",
        },
      },
      axisLabel: {
        color: "white",
      },
      data: ["1区", "2区"],
    },
  ],
  yAxis: [
    {
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLine: {
        show: true,
      },
      type: "value",
      axisLabel: {
        color: "white",
      },
    },
  ],
  series: [
    {
      name: "已处理告警数量",
      type: "bar",
      stack: "total",
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(60, 229, 189, 1)" },
          { offset: 1, color: "rgba(60, 229, 189, 0.10)" },
        ]),
      },
      label: {
        show: true,
        position: "inside",
        formatter: "{c}",
        color: "#FFFFFF",
      },
      //设置柱状图大小
      barWidth: 30,
      data: [],
    },
    {
      name: "未处理告警数量",
      type: "bar",
      stack: "total",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(242, 63, 63, 1)" },
          { offset: 1, color: "rgba(242, 63, 63, 0.10)" },
        ]),
      },
      emphasis: {
        focus: "series",
      },
      label: {
        show: true,
        position: "inside",
        formatter: "{c}",
        color: "#FFFFFF",
      },
      //设置柱状图大小
      barWidth: 30,
      data: [],
    },
  ],
};
// 告警态势分析
export const MonitorStatistics: EChartsOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  toolbox: {
    feature: {
      saveAsImage: {
        show: false,
      },
    },
  },
  grid: {
    left: "0%",
    right: "5%",
    bottom: "0",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07"],
      axisLabel: {
        color: "white",
        fontSize: 12 * Windowfontsize,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "white",
        fontSize: 12 * Windowfontsize,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255,255,255,0.2)",
        },
      },
    },
  ],
  series: [
    {
      name: "告警数量",
      type: "line",
      smooth: true,
      symbol: "emptyCircle",
      symbolSize: 0,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1.5,
          colorStops: [
            {
              offset: 0,
              color: "rgba(125, 250, 250, .6)",
            },
            {
              offset: 1,
              color: "rgba(0,0,0,0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      lineStyle: {
        shadowColor: "#5cfbff", //透明的颜色
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        opacity: 1, //透明度
        shadowBlur: 8, //阴影大小
        type: "solid", //实线
        width: 2,
        color: "rgba(125, 250, 250, 1)",
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: "rgba(125, 250, 250, 1)",
        color: "rgba(125, 250, 250, 1)",
      },
      emphasis: {
        focus: "series",
      },
      data: [],
    },
  ],
};
//告警类型统计
export const AlarmStatisticsOptions: EChartsOption = {
  title: [
    {
      text: "告警次数", // 主标题
      textStyle: {
        // 主标题样式
        color: "white",
        fontWeight: "bold",
        fontSize: 15 * Windowfontsize,
      },
      subtext: "0", // 副标题
      subtextStyle: {
        // 副标题样式
        color: "#E2F2F",
        fontSize: 27 * Windowfontsize,
        fontFamily: "Microsoft YaHei, Microsoft YaHei",
        textShadowColor: "#26BEFF",
        textShadowBlur: 6,
        fontWeight: "bold",
      },
      left: "center", // 定位到适合的位置
      top: "36%", // 定位到适合的位置
    },
  ],
  tooltip: {
    trigger: "item",
    position: "inside",
    // formatter: '<span style="color: red; margin-left: 8px; float: right;">{a} <br/>{b} : {c}次 <br/>百分比 : {d}%</span>' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    formatter: (params) => {
      let color = params.color;
      let name = params.name;
      let value = params.value;
      let percent = params.percent;
      return `<div><span style="background-color: ${color};border-radius: 50%;width: 10px;height: 10px;display: inline-block;margin-right: 5px"></span><span>告警类型：${name}</span></br><span style="color: ${color}">告警次数：${value}</span></br><span style="color: ${color}">告警占比：${percent}%</span></div>`;
    },
  },
  series: [
    {
      name: "告警类型统计",
      type: "pie",
      radius: ["56%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 0,
        borderWidth: 0,
      },
      label: {
        show: false,
        color: "#FFFFFF",
        formatter: "{b}\n\n{colorStyle|{d}%}",
        rich: {
          colorStyle: {
            color: "inherit",
          },
        },
      },
      labelLine: {
        show: false,
      },
      color: [
        "rgba(0, 148, 255, 1)",
        // "rgba(222, 206, 152,1)",
        "rgba(139, 215, 247, 1)",
        // "rgba(255, 201, 64, 1)"
      ],
      data: [],
    },
  ],
};

// let legendData = [];
// thetypeofalgorithm.forEach(element => {
//     legendData.push(element.key);
// });
// state.AlarmStatisticsOptions.legend = [
//     {
//         icon: "circle",
//         textStyle: {
//             color: "rgba(204, 204, 204, 1)",
//             fontSize: 12, // 可控制每个legend项的间距
//             rich: {
//                 // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
//                 name: {
//                     // 设置文字、数学、英语这一列的样式
//                     width: 50,
//                     height: 20,
//                     color: "white",
//                     fontSize: 12,
//                     fontWeight: "bolder",
//                 },
//                 value: {
//                     // 设置10分、20分、30分这一列的样式
//                     width: 20,
//                     height: 20,
//                     color: "inherit",
//                     fontSize: 12,
//                 },
//                 percent: {
//                     // 设置百分比这一列的样式
//                     width: 20,
//                     height: 20,
//                     color: "inherit",
//                     fontSize: 12,
//                 },
//             },

//         },
//         data: legendData.slice(0, 4),
//         left: 0,
//         itemWidth: 6,
//         itemHeight: 6,
//         backgroundColor: "transparent",
//         orient: "vertical",

//         formatter: function (name) {

//             let total = 0; // 用于计算总数
//             let target; // 遍历拿到数据

//             for (let i = 0; i < thetypeofalgorithm.length; i++) {
//                 total += thetypeofalgorithm[i].value;
//                 if (name == thetypeofalgorithm[i].key) {
//                     target = thetypeofalgorithm[i].value;
//                 }
//             }
//             // {b}\n\n{colorStyle|{d}%}
//             let percent = ((target / total) * 100).toFixed(2);
//             return `{name|${name}}\n{value|${target}次}   {percent|(${percent}%)}`;
//             //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
//         },

//     },
//     {
//         icon: "circle",
//         textStyle: {
//             color: "rgba(204, 204, 204, 1)",
//             fontSize: 12, // 可控制每个legend项的间距
//             rich: {
//                 // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
//                 name: {
//                     // 设置文字、数学、英语这一列的样式
//                     width: 50,
//                     height: 20,
//                     color: "white",
//                     fontSize: 12,
//                     fontWeight: "bolder",
//                 },
//                 value: {
//                     // 设置10分、20分、30分这一列的样式
//                     width: 20,
//                     height: 20,
//                     color: "inherit",
//                     fontSize: 12,
//                 },
//                 percent: {
//                     // 设置百分比这一列的样式
//                     width: 20,
//                     height: 20,
//                     color: "inherit",
//                     fontSize: 12,
//                 },
//             },
//         },
//         data: legendData.slice(4, 8),
//         right: 0,
//         itemWidth: 6,
//         itemHeight: 6,
//         backgroundColor: "transparent",
//         orient: "vertical",

//         formatter: function (name) {

//             let total = 0; // 用于计算总数
//             let target; // 遍历拿到数据

//             for (let i = 0; i < thetypeofalgorithm.length; i++) {
//                 total += thetypeofalgorithm[i].value;
//                 if (name == thetypeofalgorithm[i].key) {
//                     target = thetypeofalgorithm[i].value;
//                 }
//             }
//             // {b}\n\n{colorStyle|{d}%}
//             let percent = ((target / total) * 100).toFixed(2);
//             return `{name|${name}}\n{value|${target}次}   {percent|(${percent}%)}`;
//             //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
//         },
//     }
// ];
